<template>
	<view class="friend-tongan-page" :class="[$Im.getTheme()]">
		<uni-nav-bar :border='false' @clickLeft='back()' color="var(--uni-text-color)" backgroundColor="transparent"
			:left-icon="isMobile && 'left' || ''" :leftText="isMobile && '返回' || ''" title="新朋友" />
		<sxran-im-content title='加人/加群'>
			<template v-slot:header>
				<view class="tabs">
					<view class="tab-item" :class="{'active' :active == index}" v-for="(item,index) in tabs"
						:key="index" @click="tabsChange(index)">
						<text>{{item}}</text>
					</view>
				</view>
			</template>
			<uni-search-bar bgColor="var(--uni-bg-color-grey)" textColor='var(--uni-text-color)'
				@confirm="onSearchInput" v-model="words" placeholder='请输入用户名/用户昵称' @input="onSearchInput">
			</uni-search-bar>
			<view class="friend-tongan-body">
				<sxran-im-list>
					<view class="friend-tongan-item" v-for="(item,index) in list" :key="index">
						<sxran-im-list-item :title="!active ? item.nick||item.userId : item.name"
							:avatarUrl='item.avatar' :note='!active ? item.content: item.introduction'>
							<template v-slot:right>
								<view class="item-slot-rigt">
									<view @click="addChange(item)">
										<sxran-im-text :text="!active ? '添加好友' : '申请加入'" type='primary' size="14"
											align="right"></sxran-im-text>
									</view>
								</view>
							</template>
						</sxran-im-list-item>
					</view>
				</sxran-im-list>
			</view>

		</sxran-im-content>
	</view>
	<!-- 输入框示例 -->
	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="留言" value="对话框预置提示内容!" placeholder="请输入内容"
			@confirm="dialogInputConfirm"></uni-popup-dialog>
	</uni-popup>

</template>

<script>
	export default {
		name: 'friend-tongan',
		computed: {
			list() {
				return !this.active ? uni.$Im.getUserList(this.words) : uni.$Im.getGroupList(this.words);
			},
			toFriendlyTime() {
				return function(time) {
					let timestamp = time + uni.$Im.getHeartbeat() * 0;
					return uni.$u.toFriendlyTime(timestamp)
				}
			},
			isMobile() {
				return uni.$u.isMobile()
			}
		},
		data() {
			return {
				words: '',
				active: 0,
				tabs: ['加人', '加群'],
				target: null,
				searchValue: null
			}
		},
		mounted() {
			uni.$Im.searchGroupList();
			uni.$Im.searchUserList();
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			tabsChange(index) {
				this.active = index;
			},
			addChange(item) {
				this.target = item;
				this.inputDialogToggle();

			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(message) {
				if (!this.active) {
					uni.$Im.addFriendInvite({
						nick: this.target.nick,
						userId: this.target.userId,
						toUid: this.target.userId,
						message
					}, (body) => {
						//添加已添加状态  用户不存在
						uni.showToast({
							title: body.msg,
							icon: 'none',
						})
					});
				} else {
					uni.$Im.addGroupInvite({
						groupId: this.target.groupId,
						message
					}, (body) => {

						uni.showToast({
							title: body.msg,
							icon: 'none',
						})
					});
				}
				this.$refs.inputDialog.close()
			},
			/**
			 * 
			 * 同意
			 */
			agree(data) {
				console.log(data)
				//params
				const params = {
					fromUid: data.fromUid,
					message: '',
				}
				uni.$Im.acceptFriendApplication(params, res => {
					uni.$Im.readNotification({
						uuid: data.uuid,
						toId: data.toId
					})
				});
			},
			/**
			 * 
			 * 拒绝
			 *	
			 */
			refuse(data) {
				console.log(data)
				//params
				const params = {
					fromUid: data.fromUid,
					message: '',
				}
				uni.$Im.refuseFriendApplication(params, res => {
					uni.$Im.readNotification({
						uuid: data.uuid,
						toId: data.toId
					})
				});
			},

			//防抖搜索
			onSearchInput: uni.$u.debounce(function(words) {
				this.words = words
			}, 500)
		}
	}
</script>

<style scoped lang="scss">
	.friend-tongan-page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(to right bottom, var(--uni-bg-color-assist), var(--uni-bg-color-envoy));
	}



	.tabs {
		display: flex;
		border: 1px solid var(--uni-border-color);
		border-radius: $uni-border-radius-lg;
		overflow: hidden;

		.tab-item {
			flex: 1;
			text-align: center;
			font-size: 14px;
			color: var(--uni-text-color);
			padding: 10px 0;
			position: relative;
		}

		.active {
			background-color: var(--uni-color-primary);
			color: var(--uni-text-color-inverse)
		}
	}

	.friend-tongan-body {
		flex: 1 0 0;
		overflow: hidden;

		.friend-tongan-item {
			border-radius: $uni-border-radius-lg;
			overflow: hidden;

			:deep(.sxran-im-cell) {
				background-color: transparent;
			}

			// margin-bottom: $uni-spacing-col-lg;
			// padding: 0 $uni-spacing-row-lg;
		}

		.item-slot-rigt {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			// :deep(.u-text) {
			// 	padding: 0 10px !important;
			// }
		}

	}
</style>